



<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CDC疾控中心</title>
<style type="text/css">
img.wp-smiley,img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel="stylesheet" href="<%=path%>/web/css/style/style2.css" />
<script src="<%=path%>/web/js/jq.js"></script>
<script src="<%=path%>/web/js/jq1.js"></script>
</head>

<body>
<jsp:include page="headerandfoter/header.jsp"></jsp:include><!-- 包含头部 -->
<div id="pic">
	<ul>
        <c:forEach items="${noticeList}" var="notice">

            <li>
                <a href="/services/getNoticeById?noticeId=${notice.id}" style="background:url(${notice.picture}) no-repeat center center;">
                    <div class="pic_in">
                        <div id="rightpictext" class="pic_text">
                            <b>${notice.title}</b>
                            <span> 查看详细 </span>
                        </div>
                    </div>
                </a>
            </li>
        </c:forEach>
    </ul>
<div class="pic_nav"></div>
<a class="prve" style="left: -100px;"></a>
<a class="next" style="right: -100px;"></a>
</div>
<div id="Categories_hd">
      <div class="Categories_hd_in">
           <b>请施展你的身手</b>
           <p>our services / products</p>
      </div>
</div>
<div id="Categories_bd">
	<div class="Categories_bd_in">
    	<a href="/services/question_type">
            <span>
            <div class="hold"> </div>
            <img src="<%=path%>/web/images/zhuanxianglianxi.jpg" />
            </span>
             <h2>专项练习</h2>
         </a>
         <a href="#">
            <span>
            <div class="hold"> </div>
            <img src="<%=path%>/web/images/suijilianxi.jpg" />
            </span>
             <h2>顺序练习</h2>
         </a>
         <a target="_blank" href="#">
            <span>
            <div class="hold"> </div>
            <img src="<%=path%>/web/images/zhuanxiangceshi.jpg" />
            </span>
             <h2>专项测试</h2>
         </a>
         <a target="_blank" href="examination.jsp">
            <span>
            <div class="hold"> </div>
            <img src="<%=path%>/web/images/suijiceshi.jpg" />
            </span>
             <h2>随机测试</h2>
         </a>
         <a target="_blank" href="#">
            <span>
            <div class="hold"> </div>
            <img src="<%=path%>/web/images/nantigongke.jpg"  />
            </span>
             <h2>难题攻克</h2>
         </a>
	</div>
</div>

<jsp:include page="headerandfoter/foter.jsp"></jsp:include><!-- 包含尾部 -->


<script>

$(function() {
	$("#pic").jCarouselLite({
	btnNext: "#pic .next",
	btnPrev: "#pic .prve",
	speed:2000,//滚动动画的时间
	auto:4000,//滚动间隔时间
	visible:1,
	onMouse:true,
	start:0,
	easing: "easeInOutBack",
	beforeStart: function(a) {$(".pic_text").animate({"top":"0px",opacity:0},1000,'easeOutQuint'); $(".png_pic").animate({"bottom":"-300px",opacity:0},1000,'easeOutQuint'); },
	afterEnd: function(a) { $(".pic_text").animate({"top":"168px",opacity:1},1000,'easeOutBack');  $(".png_pic").animate({"bottom":"0px",opacity:1},1000,'easeOutQuint') }
	});

});

</script>
<script src="<%=path%>/web/js/d1.js"></script>
<script src="<%=path%>/web/js/d2.js"></script>
</body>
</html>
